<template>
  <page-header-wrapper>
    <page-tab-list>
      <SearchBox @search="search" @exportOL="exportOL" :exporting="exporting"></SearchBox>
    </page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator">
        <a-radio-group :defaultValue="-1" v-model="queryParam.status" @change="onOptionChange">
          <a-radio-button v-for="(item, index) in options" :key="index" :value="item.value">
            {{ item.title }}
          </a-radio-button>
        </a-radio-group>
      </div>

      <a-spin :spinning="spinning">
        <ListTable ref="listTable" :list_th="list_th" :pagaData="pagaData" @triggerAction="listActions"> </ListTable>
      </a-spin>
      <div style="float: right">
        <Pagination v-model="pageParams.pageNo" :total="totalCount" show-less-items />
      </div>
    </a-card>
    <!-- 拒绝换货 -->
    <a-modal v-model="show_disagree_1" title="拒绝换货" @ok="refundDisagre1">
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
    <!-- 拒绝退货 -->
    <a-modal v-model="show_disagree_2" title="拒绝退货" @ok="refundDisagre2">
      <a-form>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="填写拒绝理由：">
          <a-input v-model="refundHandle.remark" />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 同意换货 -->
    <a-modal v-model="show_agree_1" title="同意换货" @ok="refundAgree1">
      <a-form>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="收货地址" placeholder="请选择收货地址">
          <a-select v-model="refundHandle.address_id">
            <a-select-option
              :value="address_item.id"
              v-for="(address_item, address_index) in address"
              :key="address_index"
              >{{ address_item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 同意退货 -->
    <a-modal v-model="show_agree_2" title="同意退货" @ok="refundAgree2">
      <a-form>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="退款金额"
          :help="'最高' + max_refund_price + '元'"
        >
          <a-input-number v-model="refundHandle.refund_price" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="收货地址" placeholder="请选择收货地址">
          <a-select v-model="refundHandle.address_id">
            <a-select-option
              :value="address_item.id"
              v-for="(address_item, address_index) in address"
              :key="address_index"
              >{{ address_item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal v-model="refundPop" title="退款金额" @ok="refundSubmit">
      <a-form-model
        ref="refundForm"
        :model="refundForm"
        :rules="refundFormRules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
      >
        <a-form-model-item label="退款金额" prop="refund_price">
          <a-input-number style="width: 100%" v-model="refundForm.refund_price" :min="0" :precision="2" />
        </a-form-model-item>
        <a-form-model-item label="备注" prop="desc">
          <a-input v-model="refundForm.desc" type="textarea" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import moment from 'moment'
import { Pagination } from 'ant-design-vue'
import SearchBox from './components/SearchBox'
import ListTable from './components/ListTable'
import { refundList, exprefundList, refundOrder, refundMoney } from '@/api/order'
import NoBorderRadio from '@/components/NoBorderRadio/NoBorderRadio'

export default {
  name: 'OrderList',
  components: {
    ListTable,
    Pagination,
    NoBorderRadio,
    SearchBox,
  },
  data() {
    return {
      exporting: false,
      options: [
        {
          title: '全部',
          value: -1,
        },
        {
          title: '待处理',
          value: 0,
        },
        {
          title: '已处理',
          value: 1,
        },
      ],
      spinning: false,
      list_th: [
        { type: 'refundList', title: '产品名称', span: 5 },
        { type: 'refundList', title: '单价/数量', span: 3 },
        { type: 'refundList', title: '售后类型', span: 3 },
        { type: 'refundList', title: '退款金额', span: 2 },
        { type: 'refundList', title: '买家/收货人', span: 3 },
        { type: 'refundList', title: '下单门店/时间', span: 4 },
        {
          type: 'refundList',
          title: '操作',
          span: 3,
          actions: ['确认收货', '拒绝换货', '同意退货', '拒绝退货', '同意换货'],
        },
        { type: 'refundList', title: '操作人', span: 4 },

      ],
      activeKey: '1',
      locale: zhCN,
      ranges: {
        一月内: () => [moment().startOf('day').subtract(1, 'month'), moment()],
        昨天: () => [moment().startOf('day').subtract(1, 'days'), moment().endOf('day').subtract(1, 'days')],
        最近一周: () => [moment().startOf('day').subtract(1, 'weeks'), moment()],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      queryParam: {},
      selectDate: {},
      totalCount: 0,
      pageParams: {
        pageNo: 1,
        pageSize: 10,
      },
      pagaData: [],
      // 售后
      refund_item: null,
      show_disagree_1: false,
      show_disagree_2: false,
      show_agree_1: false,
      show_agree_2: false,
      show_agree_3: false,
      refund_type: '',
      refundHandle: {
        refund_price: 0,
        address_id: '',
        remark: '',
        order_id: 0,
      },
      address: [],
      // 最高退款金额
      max_refund_price: 0,

      refundPop: false,
      refundForm: {
        refund_price: '',
        order_id: '',
        desc: '',
      },
      refundFormRules: {
        refund_price: [{ required: true, message: '请输入退款金额', trigger: 'blur' }],
        desc: [{ required: true, message: '请输入备注', trigger: 'blur' }],
      },
    }
  },
  watch: {
    currentPage() {
      this.getOrderListData()
    },
  },
  created() {
    this.getOrderListData()
  },
  activated() {},
  computed: {
    currentPage() {
      return this.pageParams.pageNo || 1
    },
  },
  filters: {},
  methods: {
    exportOL() {
      this.exporting = true
      console.log('aaa2')
      let parameter = { ...this.queryParam, ...this.pageParams }
      Object.assign(parameter, {
        pageNo: 1,
        pageSize: 100000,
        _filename: '订单记录.xlsx',
        export: 1,
      })
      exprefundList(parameter).then(() => {
        this.exporting = false
      })
    },
    // 点击搜索按钮
    search(e) {
      console.log(e)
      this.queryParam = e
      this.getOrderListData(true)
    },
    onOptionChange(val) {
      let status = val.target.value
      this.queryParam.status = status
      this.getOrderListData()
    },
    getOrderListData(flag) {
      this.spinning = true
      if (flag) {
        this.pageParams.pageNo = 1
      }
      let params = {
        ...this.queryParam,
        ...this.pageParams,
      }
      refundList(params).then((res) => {
        if (res.code === 0) {
          this.pagaData = res.data.data
          this.address = res.data.address
          this.totalCount = res.data.totalCount
        } else {
          that.$message.error(res.msg)
        }
        this.spinning = false
      })
    },
    resetSearchForm() {
      this.queryParam = {
        dateStart: moment(new Date()),
        dateEnd: moment(new Date()),
      }
    },
    moment,
    calendarChange(date, dateString) {
      this.selectDate = date[0]
    },
    onChange(date, dateString) {
      this.queryParam.dateStart = dateString[0]
      this.queryParam.dateEnd = dateString[1]
    },
    listActions(name, row, reason) {
      this.refund_item = row
      this.refundHandle.refund_price = row.refund_price
      this.max_refund_price = row.refund_price
      this.refundHandle.order_id = row.order_refund_id
      switch (name) {
        case 'disagree_1': // 拒绝换货
          this.show_disagree_1 = true
          this.refund_type = 'disagree_1'
          break
        case 'disagree_2': // 拒绝退货
          this.show_disagree_2 = true
          this.refund_type = 'disagree_2'
          break
        case 'agree_1': // 同意换货
          this.show_agree_1 = true
          this.refund_type = 'agree_1'
          break
        case 'agree_2': // 同意退货
          this.show_agree_2 = true
          this.refund_type = 'agree_2'
          break
        case 'agree_3': // 确认收货
          this.show_agree_3 = true
          this.refund_type = 'agree_3'
          this.refundAgree3()
          break
        case 'refund':
          this.refundForm = {
            refund_price: '',
            order_id: row.order_id,
            desc: '',
          }
          this.refundPop = true
          break
        default:
          break
      }
    },
    refundSubmit() {
      this.$refs.refundForm.validate(async (valid) => {
        if (valid) {
          let { refundForm } = this
          const hide = this.$message.loading('加载中', 0)

          const res = await refundMoney(refundForm)
          hide()
          if (!res.code) {
            this.$message.success('退款成功！')
            this.refundForm = {
              refund_price: '',
              order_id: '',
              desc: '',
            }
            this.$refs.refundForm.resetFields()

            this.refundPop = false

            return
          }

          this.$message.error(res.msg)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 拒绝换货
    refundDisagre1() {
      console.log('refundDisagre1')
    },
    // 拒绝退货
    refundDisagre2() {
      var that = this
      var params = {
        type: 1,
        action: 2,
        remark: this.refundHandle.remark,
        order_refund_id: this.refundHandle.order_id,
      }
      const hide = this.$message.loading('加载中', 0)
      refundOrder(params).then((res) => {
        if (res.code === 0) {
          this.show_disagree_2 = false
          that.getOrderListData()
        } else {
          that.$message.error(res.msg)
        }
        hide()
      })
    },
    // 同意换货
    refundAgree1() {
      var that = this
      var params = {
        type: 2,
        action: 1,
        address_id: this.refundHandle.address_id,
        order_refund_id: this.refundHandle.order_id,
      }
      const hide = this.$message.loading('加载中', 0)
      refundOrder(params).then((res) => {
        if (res.code === 0) {
          this.show_agree_1 = false
          that.getOrderListData()
        } else {
          that.$message.error(res.msg)
        }
        hide()
      })
    },
    // 同意退货
    refundAgree2() {
      var that = this
      if (this.refundHandle.refund_price > this.max_refund_price) {
        return this.$message.warning('超出最高退款金额')
      }
      var params = {
        type: 1,
        action: 1,
        refund: 0,
        refund_price: this.refundHandle.refund_price,
        address_id: this.refundHandle.address_id,
        order_refund_id: this.refundHandle.order_id,
      }
      const hide = this.$message.loading('加载中', 0)
      refundOrder(params).then((res) => {
        if (res.code === 0) {
          this.show_agree_2 = false
          that.getOrderListData()
        } else {
          that.$message.error(res.msg)
        }
        hide()
      })
    },
    // 确认收货
    refundAgree3() {
      var that = this
      var params = {
        type: 1,
        action: 1,
        refund: 1,
        order_refund_id: this.refundHandle.order_id,
      }
      const hide = this.$message.loading('加载中', 0)
      refundOrder(params).then((res) => {
        if (res.code === 0) {
          that.getOrderListData()
        } else {
          that.$message.error(res.msg)
        }
        hide()
      })
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-card-head {
  border-bottom: none;
}
.top_card {
  /deep/.ant-card-body {
    padding-bottom: 0;
  }
  /deep/.ant-tabs-bar {
    margin-bottom: 0;
    border-bottom: 1px solid #fff;
  }
}
</style>
